<template>
  <div class="app-container">
    <!-- 搜索区 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="账户名称" prop="loginId">
        <el-input v-model="queryParams.loginId" placeholder="请输入账户名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="昵称" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入昵称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="创建时间"  >
           <el-date-picker
                v-model="createTimeValue"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="tableData.rows" v-loading="loading" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="loginId" label="账户" width="180" />
      <el-table-column prop="userName" label="昵称" width="180" />

      <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender==='1'" type="primary">男</el-tag>
          <el-tag v-else type="success">女</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='0'" type="primary">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.portrait" width="150">
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180" />

      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParams.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParams.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />




  </div>
</template>

<script>

  import {dataApi} from '@/api/contamer.js'
  import {buildDateSearchParams} from '@/utils/dateutil.js'

  export default {
    created() {
      this.fetchData()
    },
    data() {
      return {
        loading: false,
        //时间组件值
        createTimeValue: undefined,
        //表单查询自定义对象
        queryParams: {
          page: 1,
          size: 10
        },
        //前端表格存储分页数据
        tableData:{
          total: 0,
          rows: []
        },
        //表格选中的对象
        mutilrows:[],
        //表格选中对象的主键的值
        ids: [],
      }
    },
    methods: {
      //查询按钮
      handleQuery(){
        this.queryParams.page=1
        this.fetchData()
      },
      //表单多选事件
       handleSelectionChange(val) {
        this.mutilrows = val;
        this.ids= val.map(s=> s.id);
       },
       handleSizeChange(val) {
         this.queryParams.size= val
         this.queryParams.page=1
         this.fetchData()
       },
       handleCurrentChange(val) {
         this.queryParams.page=val
         this.fetchData()
       },
       //查询远程数据
       fetchData(){
         this.loading=true

         //添加日期
         // delete this.queryParams.beginTime
         // delete this.queryParams.endTime

         // if(this.createTimeValue && this.createTimeValue.length===2){
         //   this.queryParams.beginTime = this.createTimeValue[0]
         //   this.queryParams.endTime = this.createTimeValue[1]
         // }

        buildDateSearchParams(this.queryParams, this.createTimeValue);

         dataApi(this.queryParams).then(resp=> {
           this.tableData.total = resp.data.total
           this.tableData.rows= resp.data.list
           this.loading= false
         })
       }
    }
  }
</script>

<style>
</style>
